<template>
  <div class="addresslist-con">
    <BackTitle title="新增地址"></BackTitle>
    <van-address-edit :area-list="areaList" :address-info=addressList show-set-default show-search-result :area-columns-placeholder="['请选择', '请选择', '请选择']" @save="onSave" @delete="onDelete" />

  </div>
</template>
<script>
import { areaList } from '@vant/area-data'
import { get, removeItem } from '@/Storage'
import { getAddressId } from '@/api/requests.js'
export default {
  name: 'addAddress',
  data() {
    return {
      areaList,
      addressList: {}
    }
  },
  created() {
    this.addressList = get('addressList') || {}
  },
  methods: {
    async onSave(value) {
      const { name, tel, city, province, county, addressDetail, isDefault, id } = value
      const msg = { name, tel, city, province, county, addressDetail, isDefault }
      // 判断是修改地址还是添加地址
      if (Object.keys(this.addressList).length > 0) {
        msg.id = id
        this.$store.commit('CHANGEADDRESS', msg)
        removeItem('addressList')
      } else {
        const res = await getAddressId()
        const id = res.data.id
        msg.id = id
        this.$store.commit('ADDADDRESS', msg)
      }
      this.$router.back()
    },
    onDelete(value) {
      console.log(value)
    }
  }
}
</script>

<style lang='less' scoped>
.addresslist-con {
  font-size: 28px;
}
</style>
<style scoped lang='less'>
/deep/ .van-cell {
  font-size: 28px;
  height: 110px;
  line-height: 30px;
  padding: 20px 30px;
  .van-field {
    padding: 0;
  }
}
</style>
